<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>详情页</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/public.css">
    <link rel="stylesheet" href="./css/details.css">
</head>
<body>
     <!-- 头部 -->
     <div id="header">
        <div class="header-wrap header-list">
            <h1><img src="./images/fila_blue_150.png" alt="" class="dom_center"></h1>
            <div class="header-right">
                <input type="text" placeholder="短袖"><button>搜索</button>
                <a href="" class="enter">登入</a>
                <a href="" class="login">注册</a>
                <a href="" class="shop_cart"><img src="./images/cart-blue.png" alt=""></a>
            </div>
        </div>
    </div>
    <!-- 内容 -->
    <div class="content">
        <div class="content-l">
            <ul class="min-img">
                <li><img src="./images/11.jpg" alt=""></li>
                <li><img src="./images/2.jpg" alt=""></li>
                <li><img src="./images/4.jpg" alt=""></li>
                <li><img src="./images/1.jpg" alt=""></li>
                <li><img src="./images/2.jpg" alt=""></li>
                <li><img src="./images/4.jpg" alt=""></li>
            </ul>
        </div>
        <div class="content-c">
            <div class="img_c"> 
                <img src="" alt="">
            </div>
            <div class="min_box"></div>
            <div class="big_box">
                <img src="" alt="">
            </div>
        </div>
        <div class="content-r">
            <h3></h3>
            <p class="styles"> 款号：<span></span></p>
            <p class="price"></p>
            <p>
                <span class="promotion">促销</span>
                <i>【免运费】全场免运费</i><br>
                <i>【全场满减】满900减90元_满2000元减160_满3000元减300元</i>
            </p>
            <div class="shoes">
               <span>颜色：</span><span></span>
               <p><img src="./images/2.jpg" alt=""></p>
            </div>
            <div class="shoesSize">
                尺码：
                <ul>
                    <li id="show">39</li>
                    <li>40</li>
                    <li>40.5</li>
                    <li>41</li>
                    <li>42</li>
                    <li>42.5</li>
                    <li>43</li>
                    <li>44</li>
                    <li>45</li>
                </ul>
            </div>
            <div class="mount">
               <span class="float_left">购买数量</span> 
                <p class="float_right count">
                    <span class="plus">-</span>
                    <span class="number">0</span>
                    <span class="minus">+</span>
                </p> 
            </div>
            <p class="shop float_left"><a href="">加入购物车</a> </p>
            <p class="buy float_right"><a href="">立即购买</a> </p>
        </div>
    </div>
    <!-- 底部 -->
    <div id="foot">
        <div class="foot-wrap">
            <ul class="float_left">
                <li><a href="">购物服务</a></li>
                <li><a href="">关于品牌</a></li>
                <li><a href="">查找门店</a></li>
                <li>关注FLIA官方媒体:
                    <a href="" class="microblog"></a>
                    <a href="" class="WeChat"></a>
                </li>
                <li>售后服务电话：400-886-7699</li>
            </ul>
            <div class="foot_right float_right">
                <p>©FILA体育 闽ICP备11020421号-8 闽公网安备35020302033807号</p>
                <p>©2020 FILA Luxembourg S.à.r.l. - All Rights Reserved -</p>
            </div>
        </div>
    </div>
    <div class="service">
        <a href="">客服</a>
    </div>
    <div id="tisi">
        不能在少了官人
    </div>
    <script src="./js/jquery.min.js"></script>
    <script>
        // 放大镜
        $(function(){
            let imgList = $(".min-img img")
            imgList.click(function(){
                $(".img_c img").attr('src',$(this).attr("src"));
                $(".big_box img").attr('src',$(this).attr("src"));
            })
            let minBox = $(".min_box")
            let bigBox = $(".big_box")
            $(".content-c").mousemove(function(event){
                minBox.fadeIn()
                bigBox.fadeIn()
                let x = event.offsetX- minBox.width() / 2
                let y = event.offsetY- minBox.height() / 2
                // console.log(x)
                // console.log(y)
                if(x<0){
                    x=0    
                }
                if(x>$(".content-c").width()-minBox.width()){
                    x = $(".content-c").width()-minBox.width()
                }
                if(y<0){y = 0}
                if(y > $(".content-c").height()-minBox.height()){
                    y = $(".content-c").height()-minBox.height()
                }
                minBox.css({
                    left:x,
                    top:y
                })
                let X =x / $(this).width()
                let Y =y/ $(this).height() 
                $(".big_box img").css({
                    left:-( X * $(".big_box img").width()),
                    top:-( Y * $(".big_box img").height())
                })
            })
            $(".content-c").mouseleave(function(){
                minBox.hide()
                bigBox.hide()
            })
            // 图片数据
            let id = window.location.href.slice(window.location.href.indexOf("?") + 4)
            console.log(id)
            $.ajax({
                url:"http://127.0.0.1:81/getDetails",
                data:{
                    id:id
                },
                success:function(data){
                    // console.log(data)
                    // console.log(JSON.parse(data))
                    console.log(typeof(JSON.parse(data)))
                    JSON.parse(data).forEach(item => {
                        $(".img_c").find("img").attr("src",`./images/${item.src}`)
                        $(".big_box").find("img").attr("src",`./images/${item.src}`)
                        $(".shoes").find("img").attr("src",`./images/${item.src}`)
                        $(".shop").find("a").attr("href",`mycart.html?id=${item.id}`)
                        $(".buy").find("a").attr("href",`/shopping.html?id=${item.id}`)
                        $(".content-r").find("h3").html(item.name)
                        $(".styles").find("span").html(item.style)
                        $(".price").html(`￥${item.price}.00`)
                    });
                }
            })
            // 信息
            $(".shoesSize ul li").click(function(){
                $(".shoesSize ul li").attr("id","")
                $(this).attr("id","show")
            })
            // 
            let n = 0 
            $(".minus").click(function(){
                n++
                $(".number").html(n)
            })
            $(".plus").click(function(){
                if(n>0){
                    --n
                }
                $(".number").html(n)
                if(n===0){
                    n=0
                    $("#tisi").show()
                    setInterval(function(){
                        $("#tisi").hide()
                    },1000)
                }
            })
        })
    </script>
</body>
</html>